<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            margin: 50px auto;
            width: 350px;
            height: 500px;
            border: 1px solid red;
        }

        .top {
            width: 350px;
            height: 50px;
            line-height: 55px;
        }

        h2 {
            float: left;
            font-size: 20px;
            margin-left: 20px;
        }
        h2 span{
            color: gray;
        }

        p {
            float: right;
            margin-right: 20px;
            cursor: pointer;
            color: gray;
        }

        ol {
            /* list-style: none; */
            margin-left: 50px;
        }

        ol li {
            margin-top: 8px;
            color: blueviolet;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div>
        <div class="box">
            <div class="top">
                <h2>百度热搜 <span>&gt;</span></h2>
                <p>☭ 换一换</p>
            </div>
            <ol>

            </ol>
        </div>
    </div>

</body>

</html>
<script>
    class hotSearch {
        constructor(arr) {
            this.arr = arr
            this.ul = document.querySelector('ol')
            this.p = document.querySelector('p')
            this.page = 0
            this.render()
            this.clickChange()

        }
        // 渲染热点新闻
        render() {
            this.ul.innerHTML = this.arr[this.page].map((item) => {
                return `<li>${item}</li>`
            }).join('')
            console.log();
        }
        // 点击换一换
        clickChange() {
            this.p.onclick = () => {
                console.log(this.page);

                this.page++
                if (this.page >= this.arr.length) {
                    this.page = 0
                }
                this.render()
            }

        }
    }
    var arr = [['继续为各国来华投资提供便利', '继续为各国来华投资提供便利', '继续为各国来华投资提供便利', '继续为各国来华投资提供便利', '继续为各国来华投资提供便利', '继续为各国来华投资提供便利', '继续为各国来华投资提供便利'], ['红月亮遇上蓝月亮', '橙月亮遇上紫月亮', '粉月亮遇上黄月亮', '黑月亮遇上白月亮', '绿月亮遇上青月亮']]
    new hotSearch(arr)
</script>